﻿<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="TravelStar - Tour, Travel, Travel Agency Template">
    <meta name="keywords" content="Tour, Travel, Travel Agency Template">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>TravelStar - Tour, Travel & Travel Agency Template</title>
    <!-- Google Fonts Includes -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
    <!-- Favi icon -->
    <link rel="shortcut icon" type="image/x-icon" href="../static/images/favicon.ico">
    <!-- bootstrap v3.3.6 css -->
    <link rel="stylesheet" href="../static/css/assets/bootstrap.min.css">
    <!-- animate css -->
    <link rel="stylesheet" href="../static/css/assets/animate.css">
    <!-- Button Hover animate css -->
    <link rel="stylesheet" href="../static/css/assets/hover-min.css">
    <!-- jquery-ui.min css -->
    <link rel="stylesheet" href="../static/css/assets/jquery-ui.min.css">
    <!-- meanmenu css -->
    <link rel="stylesheet" href="../static/css/assets/meanmenu.min.css">
    <!-- owl.carousel css -->
    <link rel="stylesheet" href="../static/css/assets/owl.carousel.min.css">
    <!-- slick css -->
    <link rel="stylesheet" href="../static/css/assets/slick.css">
    <!-- chosen.min-->
    <link rel="stylesheet" href="../static/css/assets/jquery-customselect.css">
    <!-- font-awesome css -->
    <link rel="stylesheet" href="../static/css/assets/font-awesome.min.css">
    <!-- magnific Css -->
    <link rel="stylesheet" href="../static/css/assets/magnific-popup.css">
    <!-- Preloader css -->
    <link rel="stylesheet" href="../static/css/assets/preloader.css">
    <!-- custome css -->
    <link rel="stylesheet" href="../static/css/style.css">
    <!-- responsive css -->
    <link rel="stylesheet" href="../static/css/responsive.css">
    <link rel="stylesheet" href="../static/css/master.css">

    <script src="../static/js/vendor/modernizr-2.8.3.min.js"></script>
    <!-- gaode map css-->
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />

    <style type="text/css">
        #container {
            width: 100%;
            height: 400px;
            margin: 50px 0 100px 0;
        }
        #button_1{
            margin: 50px auto 20px auto;
        }
        #button_2{
            margin: auto;
        }
    </style>

    <!-- gaode map api -->
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=b390950cd9c2d4df9f77ae4ee42eebdd&plugin=AMap.Driving"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

    <!-- 下拉框 -->
    <link rel="stylesheet" type="text/css" href="../static/css/下拉框/selectFilter.css" />
</head>
<body>
<div id="loader-wrapper">
    <div id="loader"></div>
    <div class="loader-section section-left"></div>
    <div class="loader-section section-right"></div>
</div>
<!-- header area start here -->
<!-- 固定头部，不要动 -->
<header>
    <div class="main_nav">
        <div class="container">
            <div class="row">
                <div class="col-md-2 col-sm-2 col-xs-12 tap-v-responsive">
                    <div class="logo-area">

                    </div>
                </div>
                <div class="col-md-10">
                    <nav>
                        <ul class="main-menu text-right">
                            <li class="active"><a href="index.html">主页</a></li>
							
							<li><a href="{{url_for('personinfor')}}">智能推荐</a></li>
							
                            <li><a href="{{url_for('Recommend')}}">精准推荐</a></li>
                         
                            <li><a href="{{url_for('Wish_list')}}">心愿清单</a></li>
							
                            <li><a href="{{url_for('luxian')}}">我的路线</a></li>
							
                            <li><a href="{{url_for('contact')}}">电子导游</a></li>
                        </ul>
                    </nav>
                </div> <!-- main menu end here -->
            </div>
        </div>
    </div> <!-- header-bottom area end here -->
</header> <!-- header area end here -->

    <!-- blog breadcrumb version one strat here -->
    <section class="breadcrumb-blog-version-one">
        <div class="single-bredcurms" style="background-image:url('../static/images/bercums/contact-page.jpg');">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="bredcrums-content">
                            <h2>电子导游-智能推荐</h2>
                            <ul>
                                <li><a href="index.html">便捷</a></li>
                                <li class="active"><a href="contact.html">精准的路线规划</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section><!-- blog breadcrumb version one end here -->

    <hr>
    <!-- 下拉框 -->
  <form action="{{ url_for('contact') }}" method="POST">
    <div class="form-container" style="text-align: center;">
         <h3 style="text-align:center; font-weight:300;font-style: inherit">请输入您的当前位置</h3>
        </br>
        <div class="form-group">
                <input align="center" align="center" style="height:40px;width:800px;margin:0 auto;text-align: center; text-align-last: center;font-weight:300; font-style: inherit" type="text" class="form-control" placeholder="我的位置" name="weizhi">
            </div>
    </div>
  </br>
                <h3 style="text-align:center; font-weight:300;font-style: inherit">请选择您的路线</h3>
        </br>
            <select class="form-control" align="center" style="height:40px;width:800px;margin:0 auto;text-align: center; text-align-last: center;font-weight:300; font-style: inherit" name="luxian">
            <option value="未选择">未选择</option>
                {%for i,n in content%}
                <option value="{{i}}">路线{{n}}&nbsp&nbsp&nbsp{{i}}</option>
                {%endfor%}
           </select>
        </br>
         <button style="height:30px;width:800px;display:block;margin:0 auto;font-weight:300; font-style: inherit" class="btn btn-primary btn-block"type="submit">确认选择并生成导航</button>
            </div>
  </form>


    <!-- gaode map start  -->

    <div class="map-wrapper">
    <div class="map-wrapper">
        <div class="map-area">
            <div id="button_1" style="text-align:center;">
                {%for l1,l2,n in content2%}
                <input id="button_2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" name="first" value="{{l1}}->{{l2}}" onclick="direc{{n}}()">
                {%endfor%}
            </div>
            <hr>
            <div id="container"></div>

        </div>
    </div>

    <script type="text/javascript">
        var map = new AMap.Map("container", {
            resizeEnable: true,
            center: [116.97, 35.59],//地图中心点
            zoom: 13 //地图显示的缩放级别
            //viewMode: '3D',
            //pinch: 45
        });

        //构造路线导航类
            var driving = new AMap.Driving({
                map: map
            });
    </script>
 {%for l1,l2,n in content3%}
    <script type="text/javascript">
        function direc{{n}}() {

            // 根据起终点名称规划驾车导航路线
            driving.search([
                {keyword: '{{l1}}', city: '北京'},
                {keyword: '{{l2}}', city: '北京'}
            ], function (status, result) {

            });
        }
    </script>
{%endfor%}





    <!-- gaode map end  -->




<hr>

    <!-- Scroll to top-->

    <!-- ============================
            JavaScript Files
    ============================= -->

    <!-- jquery latest version -->
    <script src="../static/js/vendor/jquery-3.2.0.min.js"></script>
    <script src="../static/js/vendor/modernizr-2.8.3.min.js"></script>

    <!-- bootstrap js1 -->
    <script src="../static/js/bootstrap.min.js"></script>
    <!-- owl.carousel js1 -->
    <script src="../static/js/owl.carousel.min.js"></script>
    <!-- slick js1 -->
    <script src="../static/js/slick.min.js"></script>
    <!-- meanmenu js1 -->
    <script src="../static/js/jquery.meanmenu.min.js"></script>
    <!-- jquery-ui js1 -->
    <script src="../static/js/jquery-ui.min.js"></script>
    <!-- wow js1 -->
    <script src="../static/js/wow.min.js"></script>
    <!-- counter js1 -->
    <script src="../static/js/jquery.counterup.min.js"></script>
    <!-- Countdown js1 -->
    <script src="../static/js/jquery.countdown.min.js"></script>
    <!-- waypoints js1 -->
    <script src="../static/js/jquery.waypoints.min.js"></script>
    <!-- Isotope js1 -->
    <script src="../static/js/isotope.pkgd.min.js"></script>
    <!-- magnific js1 -->
    <script src="../static/js/jquery.magnific-popup.min.js"></script>
    <!-- Image loaded js1 -->
    <script src="../static/js/imagesloaded.pkgd.min.js"></script>
    <!-- chossen js1 -->
    <script src="../static/js/chosen.jquery.min.js"></script>
    <!-- Jquery plugin -->
    <script src="../static/js/plugins.js"></script>
    <!-- select2 js1 plugin -->
    <script src="../static/js/select2.min.js"></script>
    <script src="../static/js/colors.js"></script>
    <!-- Jquery plugin -->
    <script src="../static/js/jquery-customselect.js"></script>

    <!-- map js1 -->
    <script src="../static/js/google-map.js"></script>
    <!-- main js1 -->
    <script src="../static/js/custom.js"></script>
    <!-- 下拉框 -->
    <script src="../static/js/selectFilter.js"></script>
    <script type="text/javascript">
        //这里是初始化
        $('.filter-box').selectFilter({
            callBack : function (val){
                //返回选择的值
                console.log(val+'-是返回的值')
            }
        });
    </script>
</div>
</body>
</html>
